<!-- 页面 -->
<template>
  <div>
    <el-table :data="paginatedData" border style="width: 100%" class="center-table">
      <el-table-column prop="operationUser" label="操作人" align="center">
      </el-table-column>
      <el-table-column prop="operationObject" label="操作对象" align="center">
      </el-table-column>
      <el-table-column prop="operationType" label="操作类型" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.operationType" placement="top">
            <span class="ellipsis-cell">{{ scope.row.operationType }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="operationTime" label="操作时间" align="center">
      </el-table-column>
      <el-table-column prop="operationStatus" label="操作结果" align="center">
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button size="mini" @click="openDetailsDialog(scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="danger" @click="deleteRow(scope.row.operationUser)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="pageSize" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></el-pagination>


    <!-- 详情弹出层 -->
    <el-dialog :visible.sync="detailsDialogVisible" title="操作详情" width="600px">
      <el-form :model="detailsForm" label-width="100px">
        <el-form-item label="操作人">
          <el-input v-model="detailsForm.operationUser" disabled />
        </el-form-item>
        <el-form-item label="操作对象">
          <el-input v-model="detailsForm.operationObject" disabled />
        </el-form-item>
        <el-form-item label="操作类型">
          <el-input v-model="detailsForm.operationType" disabled />
        </el-form-item>
        <el-form-item label="操作时间">
          <el-input v-model="detailsForm.operationTime" disabled />
        </el-form-item>
        <el-form-item label="操作结果">
          <el-input v-model="detailsForm.operationStatus" disabled />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { systemTargetList, systemtgetList, systemupdategetList, systemdeletegetList } from "@/api/system/index.js";
import operateitem from "./operateitem.vue";
import { mapGetters } from 'vuex';
export default {
  components: { operateitem },
  data() {
    return {
      operationLogs: [],
      paginatedData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      detailsDialogVisible: false,
      detailsForm: {}, // 详情数据
    };
  },
  computed: {
    ...mapGetters(['receivedName']),
  },
  watch: {
    receivedName: {
      immediate: true, // 页面加载时立刻执行一次
      async handler(name) {
        if (name) {
          console.log("日志页面收到工具名称:", name);
          await this.fetchOperationLogs(name);  // 加载日志
          this.$store.commit("clearReceivedName"); // 用完就清空
        }
      }
    }
  },
  mounted() {
    this.getSystemTargetList();
  },
  methods: {
    async getSystemTargetList() {
      try {
        const response = await systemTargetList();
        this.operationLogs = response.data;
        this.total = this.operationLogs.length;
        this.updatePaginatedData();
      } catch (error) {
        console.error("获取操作日志失败:", error);
      }
    },
    async fetchOperationLogs() {
      console.log("fetchOperationLogs 接收到的工具名称:", this.receivedName); // 确认参数
      if (!this.receivedName) {
        console.error("工具名称为空，无法执行接口调用");
        return;
      }
      try {
        const response = await systemtgetList({
          operationObject: this.receivedName, // 将工具名称作为参数传递
          operationType: "下载",
        });
        this.operationLogs = response.data; // 假设返回的数据是一个数组
        this.total = this.operationLogs.length; // 设置总条数
        this.getSystemTargetList(); // 初始化分页数据
        console.log("操作日志数据:", this.operationLogs);
      } catch (error) {
        console.error("获取操作日志失败:", error);
      }
    },
    updatePaginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.paginatedData = this.operationLogs.slice(start, end);
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
      this.updatePaginatedData();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.updatePaginatedData();
    },
    async handleEditSubmit(formData) {
      try {
        const response = await systemupdategetList(formData);
        this.$message.success("编辑成功");
        this.getSystemTargetList(); // 刷新列表
      } catch (error) {
        console.error("编辑失败:", error);
        this.$message.error("编辑失败，请稍后再试");
      }
    },
    openDetailsDialog(row) {
      this.detailsForm = { ...row }; // 数据回显
      this.detailsDialogVisible = true; // 打开详情弹出层
    },
  },
};
</script>

<style scoped>
.pagination {
  margin-top: 20px;
  text-align: right;
}
.center-table{
  border-radius: 10px;
}
.center-table .el-table__cell {
  text-align: center;
}

::v-deep .el-dialog__header {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-dialog__header .el-dialog__title {
  color: #fff !important;
  /* 白色字体 */
}

::v-deep .el-dialog__body {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-dialog__footer {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-message-box .el-message-box__header {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-dialog__body .el-form .el-form-item .el-form-item__label {
  color: #fff !important;
}

::v-deep .el-input .el-input__inner {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-input__inner {
  color: #fff !important;
}

.ellipsis-cell {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
</style>
